<template>
  <div style="height: 100%; width: 100%">
    <div id="cesiumContainer"></div>
    <div id="animationContainer" style="position: absolute;bottom: 50px;right: 300px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addCesiumAnimation(this.viewer)
  },
  methods: {
    initCesium() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZGViNmIwOS0zOWY3LTQ0ZTYtYjg5Yi1jNDEyYzAzZmY1ZmUiLCJpZCI6MTE2OTA2LCJpYXQiOjE2Njk5NjE5NTB9.nN-KM-HnA5STxtweph2Rly5Y9O7bqX1khZKYQlcevHw';


      this.viewer = new Cesium.Viewer('cesiumContainer', {
        animation: true,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: true,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: true,
        selectionIndicator: false,//是否显示选取指示器组件
        shouldAnimate: true,     //自动播放动画控件
        shadows: true,//是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D,
        terrainProvider: new Cesium.CesiumTerrainProvider({//地质开挖必须是cesium提供的地形
          url: Cesium.IonResource.fromAssetId(1),
          requestVertexNormals: true,//顶点法线效果
          requestWaterMask: true//水效果
        })
      })
      //地质开挖不能有深度测试，有深度测试会被遮盖
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addCesiumAnimation(viewer) {
      // In HTML head, include a link to Animation.css stylesheet,
      // and in the body, include: <div id="animationContainer"></div>

      var clock = new Cesium.Clock({
        startTime : Cesium.JulianDate.fromIso8601("2018-12-25"),
        currentTime : Cesium.JulianDate.fromIso8601("2018-12-25"),
        stopTime : Cesium.JulianDate.fromIso8601("2018-12-26"),
        clockRange : Cesium.ClockRange.CLAMPED,
        clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
        multiplier: 10.0, // how much time to advance each tick
        shouldAnimate: true // Animation on by default
      })
      let clockViewModel = new Cesium.ClockViewModel(clock);
      let viewModel = new Cesium.AnimationViewModel(clockViewModel);
      let widget = new Cesium.Animation('animationContainer', viewModel);

      function tick() {
        clock.tick();
        Cesium.requestAnimationFrame(tick);
      }

      Cesium.requestAnimationFrame(tick);

    }
  }
}
</script>
<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
